<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<form name="formApplication" ng-submit="$ctrl.update()" novalidate>
  <div class="gv-forms" layout="column" permission permission-only="'application-definition-r'">
    <application-header application="$ctrl.application"></application-header>
    <div class="gv-form">
      <h2>General</h2>
      <div class="gv-form-content" layout="column">
        <div layout-gt-sm="row">
          <div layout="column" flex>
            <div layout-gt-sm="row">

              <md-input-container flex>
                <label>Name</label>
                <input ng-model="$ctrl.application.name" type="text" name="name" md-maxlength="512" required>
                <div class="hint" ng-if="formApplication.name.$valid || formApplication.name.$pristine">Application name</div>
                <div ng-messages="formApplication.name.$error">
                  <div ng-message="required">Application name is required.</div>
                  <div ng-message="md-maxlength">The name has to be less than 50 characters long.</div>
                </div>
              </md-input-container>

              <md-input-container ng-if="!$ctrl.isOAuthClient()">
                <label>Type</label>
                <input ng-model="$ctrl.application.settings.app.type" type="text" name="type">
                <div class="hint" ng-if="formApplication.type.$valid || formApplication.type.$pristine">
                  Type of the application (mobile, web, ...).
                </div>
              </md-input-container>
            </div>

            <md-input-container>
              <label>Description</label>
              <input ng-model="$ctrl.application.description" type="text" name="description" required>
              <div class="hint" ng-if="formApplication.description.$valid || formApplication.description.$pristine">
                Provide a description of your application, what it does, ...
              </div>
              <div ng-messages="formApplication.description.$error">
                <div ng-message="required">Application description is required.</div>
              </div>
            </md-input-container>
          </div>
          <gravitee-image image-id="$ctrl.application.id" image="$ctrl.application.picture"
                          image-url="$ctrl.application.picture_url" success-event-name="applicationPictureChangeSuccess"
                          image-name="$ctrl.application.name + '  ' + $ctrl.application.type + '  ' + $ctrl.application.owner.displayName"></gravitee-image>

          <gravitee-image image-id="'bg-' + $ctrl.application.id" image="$ctrl.application.background"
                          image-url="$ctrl.application.background_url" change-label="Change background"
                          no-default-image="true" success-event-name="applicationBackgroundChangeSuccess"
                          image-name="'bg-' + $ctrl.application.name + '  ' + $ctrl.application.type + '  ' + $ctrl.application.owner.displayName"></gravitee-image>
        </div>
        <div layout="row">
          <md-input-container class="md-block" flex>
            <label>Owner</label>
            <input type="text" disabled value="{{$ctrl.application.owner.displayName}}">
          </md-input-container>
          <md-input-container class="md-block" flex>
            <label>Created at</label>
            <input type="text" disabled value="{{$ctrl.application.created_at | humanDateFilter}}">
          </md-input-container>
        </div>
      </div>
    </div>

    <div ng-if="!$ctrl.isOAuthClient()">
      <h2>OAuth2 Integration</h2>
      <div class="gv-form-content" layout="column">
        <md-input-container>
          <label>Client ID</label>
          <input ng-model="$ctrl.application.settings.app.client_id" type="text" name="clientId" minlength="1" md-maxlength="300">
          <div class="hint" ng-if="formApplication.clientId.$valid || formApplication.clientId.$pristine">
            The <code>Client_id</code> of the application. This field is required to subscribe to certain type of API
            Plan (OAuth2, JWT).
          </div>
          <div ng-messages="formApplication.clientId.$error">
            <div ng-message="minlength">The name has to be more than 1 character long.</div>
            <div ng-message="md-maxlength">The name has to be less than 300 characters long.</div>
          </div>
        </md-input-container>
      </div>
    </div>

    <div ng-if="$ctrl.isOAuthClient()">
      <h2>OpenID Connect Integration</h2>
      <div class="gv-form-content" layout="column">
        <div layout="row">
          <md-input-container flex="40">
            <label>Client ID</label>
            <input ng-model="$ctrl.application.settings.oauth.client_id" type="text" readonly>
          </md-input-container>

          <span flex>
            <md-tooltip md-direction="right">Copy to clipboard</md-tooltip>
            <ng-md-icon icon="content_copy"
                        ngclipboard data-clipboard-text="{{$ctrl.application.settings.oauth.client_id}}"
                        ngclipboard-success="$ctrl.onCopyClientIdSuccess(e);" role="button">
            </ng-md-icon>
          </span>

          <md-input-container flex="40">
            <label>Client Secret</label>
            <input ng-model="$ctrl.application.settings.oauth.client_secret" type="text" readonly>
          </md-input-container>

          <span flex>
            <md-tooltip md-direction="right">Copy to clipboard</md-tooltip>
            <ng-md-icon icon="content_copy"
                        ngclipboard
                        data-clipboard-text="{{$ctrl.application.settings.oauth.client_secret}}"
                        ngclipboard-success="$ctrl.onCopyClientSecretSuccess(e);" role="button">
            </ng-md-icon>
          </span>

          <md-button class="md-raised md-primary" type="button"
                     style="height: 36px"
                     ng-if="$ctrl.application.settings.oauth.renew_client_secret_supported"
                     ng-click="$ctrl.renewClientSecret($event)"
                     permission permission-only="'application-definition-u'">
            Renew secret
          </md-button>
        </div>

        <md-input-container class="md-block">
          <label>Allowed grant types</label>
          <md-select ng-model="$ctrl.application.settings.oauth.grant_types"
                     ng-change="$ctrl.updateGrantTypes()"
                     multiple required>
            <md-option
              ng-value="grantType.type"
              ng-repeat="grantType in $ctrl.applicationType.allowed_grant_types"
              ng-disabled="$ctrl.applicationType.isGrantTypeMandatory(grantType)">
              {{::grantType.name}}
            </md-option>
          </md-select>
          <div class="hint">
            Grant types allowed for the client. Please set only grant types you need for security reasons.
          </div>
        </md-input-container>

        <md-input-container class="md-block" ng-if="$ctrl.applicationType.requires_redirect_uris">
          <label>Redirect URIs</label>
          <md-chips required
                    ng-model="$ctrl.application.settings.oauth.redirect_uris"
                    placeholder="Enter a redirect URI"
                    ng-click="$ctrl.formApplication.$setDirty()"
                    md-add-on-blur="true"
                    md-on-remove="$ctrl.formApplication.$setDirty()"></md-chips>
          <div class="hint">
            URIs where the authorization server will send OAuth responses
          </div>
        </md-input-container>
      </div>
    </div>

    <div class="gv-form">
      <h2>Access-Control</h2>
      <div class="gv-form-content" layout="column">
        <md-input-container>
          <label>Groups</label>
          <md-select aria-label="group"
                     ng-model="$ctrl.application.groups"
                     multiple>
            <md-option ng-value="group.id" ng-repeat="group in $ctrl.groups">{{group.name}}</md-option>
          </md-select>
        </md-input-container>
      </div>
    </div>

    <div class="md-actions gravitee-api-save-button" layout="row" ng-if="$ctrl.application.status !=='ARCHIVED'">
      <md-button class="md-raised md-primary" type="submit"
                 ng-disabled="formApplication.$invalid || formApplication.$pristine"
                 permission permission-only="'application-definition-u'">
        Save
      </md-button>
      <md-button class="md-raised" type="button" ng-click="$ctrl.reset()"
                 ng-disabled="formApplication.$invalid || formApplication.$pristine"
                 permission permission-only="'application-definition-u'">
        Reset
      </md-button>
      <md-button class="md-raised md-warn" type="button"
                 ng-click="$ctrl.showDeleteApplicationConfirm($event)"
                 permission permission-only="'application-definition-d'">
        Delete
      </md-button>
    </div>
  </div>
</form>
